<template>
    <div>
        <h1>该页面不存在<span class="red">{{ num }}</span>秒后跳转至首页！</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        //设置方法
        fn1() {
            const promiseAll = [];//设置存放所有 promise定时器对象的数组
            for (var i = 0; i < 5; i++) {
                ((j) => {
                    promiseAll.push(new Promise((resolve) => {
                        setTimeout(() => {
                            this.num = 5 - j;
                            resolve()
                        }, 1000 * j)
                    }))
                })(i)
            }
            Promise.all(promiseAll).then(() => {
                setTimeout(() => {
                    this.$router.push({ name: 'layout' })
                }, 1000)

            }).catch(() => {
                console.log('跳转失败！')
            })
        }
    },
    mounted() {
        this.fn1()
    }

}
</script>

<style lang="less" scoped>
.red {
    color: red;
}
</style>